# 3.4.7 性能优化

# 1.减少 http 请求

# 2.首屏加载

• 骨架屏

• 只加载可视区域

• 图片懒加载和预加载

# CND 加速

• 减轻服务器压力
• 减少服务器的请求并发量

# 使用缓存

• 加快访问速度
• 减少了冗余的数据传输
  cookie,Session,localStorage,sessionStorage,ApplicationCache

# 静态资源的合并和压缩

# 减少 重绘和回流

# 减少作用域链查找，避免使用全局变量

# meta dns prefetch设置DNS预解析

设置文件资源的DNS预解析，能让浏览器提前解析获取静态资源的主机IP，避免等到请求的时候才发起DNS解析。

<!-- cdn域名预解析 -->
<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel="dns-prefetch" href="//x.autoimg.cn">

# 资源预加载

首屏加载完成后可能会使用的资源，我们可以用 link标签声明特定文件的预加载

<link rel='subresource' href='main.css'>

<link rel='prefetch' href='secondary.js'>

注意：只有可缓存的资源才进行预加载，否则浪费资源！

# Pre render预渲染

预渲染意味着我们提前加载好用户即将访问的下一个页面，否则进行预渲染这个页面将浪费资源，慎用！

<link rel='prerender' href='//j.autohome.com.cn'>

# 参考

• 前端性能优化方案都有哪些？
• 前端常用缓存技术
• 前端性能优化最佳实践
• 浅谈前端性能优化（移动端）